<template>
    <div>
        <div class="img-list">
            <div class="img-card" v-for="item in img_list" :key="item.fileId" @click.stop="onSelectImg(item)">
                <div :class="{ 'img-card-select': selectedImgs.includes(item) }">
                    <span class="img-remove" @click.stop="removeFile(item.fileId)"><i class="el-icon-delete"></i></span>
                    <el-image :src="base_url + item.filePath" fit="fill"></el-image>
                </div>
                <span>
                    <el-input class="input-new-tag" v-if="item.inputVisible" v-model="item.fileName"
                        :ref="'fileNameInput' + item.fileId" size="small" @keyup.enter.native="handleInputConfirm(item)">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click.stop="showInput(item)">
                        <i class="el-icon-edit"></i>
                        {{ item.fileName }}
                    </el-button>
                </span>
            </div>
        </div>

    </div>
</template>

<script>
import { update_file_name, file_del } from '@/api/biz/attachFile'
export default {
    //import引入组件才能使用
    components: {},
    props: {
        img_list: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 支持多选
        multiple: {
            type: Boolean,
            default: false
        },
        selectedImgs: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            base_url: process.env.VUE_APP_MINIO_API,
            inputVisible: false,
        };
    },
    // 计算属性
    computed: {},
    // 监听data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        showInput(item) {
            item.inputVisible = true;
            this.$forceUpdate()
            this.$nextTick(_ => {
                this.$refs['fileNameInput' + item.fileId][0].focus();
            });
        },
        handleInputConfirm(item) {
            update_file_name({ fileId: item.fileId, fileName: item.fileName }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            })
            this.$set(item, 'inputVisible', false);
            this.$forceUpdate()
        },
        onSelectImg(image) {
            this.$emit('on-select', image)
        },
        removeFile(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                file_del(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.$emit('on-remove', id)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {

    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped>
.img-list {
    margin: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    justify-items: center;
    justify-content: space-around;
    align-items: end;
    grid-gap: 10px;
}

.img-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}



.img-card-select {
    border: #87cf63 solid 1px;
}

.button-new-tag {
    /* 文字超出隐藏 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.img-card>div {
    position: relative;
}

.img-remove {
    position: absolute;
    top: -10px;
    right: -7px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 999;
}

.img-remove:hover {
    font-weight: bold;
    font-size: larger;
}
</style>